<template>
	<view class="detail page">
		<comHead :datas="datasObj"></comHead>

		<view class="cardList" v-if="product_info && Object.keys(product_info).length > 0">
			<view class="card  pd-12" @click="goProjectDetail(product_info.id)"
				v-if="product_info && Object.keys(product_info).length > 0">
				<view class="flex">
					<view class="left fs0">
						<image style="border-radius: 40rpx" class="img wh-100" mode="aspectFill"
							:src="product_info?.cover"></image>
					</view>
					<view class="right ml-20 te-wid">
						<view class="top">
							<view class="flex mt-30" style="overflow: hidden">
								<view class="flex fs0" v-if="product_info?.recommends_show">
									<view class="tip ft ft-20 flex-center mr-10 fs0"
										v-for="(tag, index) in product_info?.recommends_show.slice(0, 2)" :key="index">
										{{ tag }}
									</view>
								</view>
								<view class="title ft-lue ft ft-32 fw-800 te-1">{{ product_info.name }}
								</view>
							</view>
						</view>
						<view class="midel">
							<text class="ft mr-10 c-99" v-for="(tag, index) in product_info?.tags" :key="index">
								<text v-if="index === product_info?.tags.length - 1">{{
									tag.name
								}}</text>
								<text v-else> {{ tag.name + " | " }}</text>
							</text>
						</view>
						<view class="domn flex mt-20">
							<view class="price">
								<view class="ft">白菜价</view>
								<text class="ft-20 fw-800 c-33 mt-8">
									{{ product_info.currency_symbol }}
									<text class="ft-num3 fw-400 c-33">
										{{ product_info.bc_price_show }}</text>
									{{ product_info.bc_price_unit }}</text>
							</view>
							<image class="wh-37" style="margin: 0 15rpx;"
								src="https://cdn.oss.bon-top.cn/static_bc/images/price1.png"></image>
							<view class="price2">
								<view class="ft c-99">同行价</view>
								<text v-if="product_info.peer_price_show" class="ft-20 fw-800 c-99">
									{{ product_info.currency_symbol }}
									<text class="ft-num3 fw-400 c-99">
										{{ product_info.peer_price_show }}</text>
									{{ product_info.bc_price_unit }}</text>
								<text v-else style="font-weight: 800; font-size: 20rpx; color: #999999">
									{{ "暂无价格" }}
								</text>
							</view>
						</view>
					</view>
				</view>
				<view class="foot mt-20 flex-bwt">
					<view class="arrow">
						<text class="ft" v-if="product_info.brand_info">{{
							"项目方:" + product_info.brand_info.name
						}}</text>
						<text class="ft" v-else>{{ "项目方:暂无数据" }}</text>
					</view>
					<view class="down flex mr-12">
						<image class="wh-24" src="https://cdn.oss.bon-top.cn/static_bc/images/icon12.png"></image>
						<text class="ft" style="margin-left: 8rpx" v-if="product_info.country_info">
							{{ product_info.country_info.name }}</text>
						<text class="ft" style="margin-left: 8rpx" v-else>
							{{ "暂无数据" }}</text>
					</view>
				</view>
			</view>
		</view>

		<view class="pCase pd-20">
			<view class="flex-bwt">
				<view class="flex">
					<view class="wh-68" style="position: relative;">
						<image class="avtor wh-100" :src="user_info?.avatar"></image>

						<image class="wh-28" v-if="user_info?.sale_info?.is_official" style="
		                border-radius: 50%;
		                position: absolute;
		                right: 0;
		                bottom: 0;
		                z-index: 3;
		              " src="https://cdn.oss.bon-top.cn/static_bc/images/certified.png"></image>
					</view>
					<view class="right ml-20">
						<view class="ft1 flex">
							<view class="ft1"></view> {{ user_info.nickname }}
							<view class="nameplate ml-10 ft ft-20 c-dbf" v-if="user_info?.level_info?.id > 1">{{
								user_info?.level_info?.name
							}}</view>
						</view>
						<view class="ft mt-12 c-99">{{
							detailInfo.ip_location + " | " + detailInfo.created_at
						}}</view>
					</view>
				</view>
				<view class="positionBox">
					<image @click="isMore = !isMore" style="
              z-index: 1;
              width: 74rpx;
              height: 42rpx;
              margin-bottom: 30rpx;
            " src="https://cdn.oss.bon-top.cn/static_bc/images/more_p.png"></image>
					<view v-if="isMore" class="box pd-20">
						<view v-if="detailInfo.is_my === 0" class="ft c-33 flex-center"
							@click="goReport(detailInfo.id, 1, 'evaluate_id')">举报
						</view>
						<view v-else class="ft c-33  flex-center" @click="isDelete(detailInfo.id, 'eval')">删除</view>
					</view>
				</view>
			</view>
			<view class="score mt-40 ml-20 flex">

				<comRate ref="comRate" v-if="detailInfo.star" :num="detailInfo.star" disabled noVal></comRate>

				<text class="ft ml-4 c-99">{{
					detailInfo.buy_txt
				}}</text>
			</view>
			<view class="flex mt-24 ml-20">
				<view class="tcard ft c-66 mr-24 flex-center" v-for="tag in detailInfo.tags" :key="tag.id">
					{{ tag.name }}
				</view>
			</view>
			<view class="card1 mt-24 pd-20">
				<view class="ft1">评论</view>
				<view class="description mt-20 ft c-66">
					{{ detailInfo.isName ? detailInfo.name : detailInfo.name?.substring(0, 20) }}
					<text class="ft c-bbq" v-if="detailInfo.name?.length > 20"
						@click="detailInfo.isName = detailInfo.isName == 1 ? 0 : 1">{{
							detailInfo.isName == 1 ? '收起' : '...展开' }}</text>
				</view>
				<scroll-view class="scroll-view_H mt-20" scroll-x="true" scroll-left="0">
					<view class="imgGroup flex fs0" v-if="detailInfo.images && detailInfo.images.length > 0">
						<image class="group mr-20 fs0" mode="aspectFill" @click="openImg(index, detailInfo.images)"
							:src="item" v-for="(item, index) in detailInfo.images" :key="index">
						</image>
					</view>
				</scroll-view>
			</view>
			<view class="card2 mt-24 pd-20" v-if="detailInfo.process && detailInfo.process.length > 0">
				<view class="ft1">历程</view>
				<view class="setp mt-24">
					<u-steps dot activeColor="#333333" inactiveColor="#999999" direction="column"
						:current="detailInfo.process.length">
						<u-steps-item v-for="(item, index) in detailInfo.process" :key="index" class="">
							<template #desc>
								<view class="ft c-99 fw-800">
									{{ item.time[0] + " - " + item.time[1] }}

								</view>
								<view class="mt-10 ft" style="padding-bottom: 60rpx;">
									{{ item.content }}
								</view>
							</template>
						</u-steps-item>
					</u-steps>
				</view>

			</view>
			<!-- <view class="card3 mt-24 pd-20" v-if="detailInfo.sales && detailInfo.sales.length > 0">
				<view class="ft1">顾问</view>
				<view class="flex-bwt mt-20">
					<view class="consultant" v-for="(item, index) in detailInfo.sales" :key="index">
						<view class="title m-20 flex">
							<view class="avtor flex-center mr-12">
								<image class="wh-72" style="border-radius: 50%" :src="item.avatar"></image>
							</view>
							<view class="desc">
								<view class="ft ft-20 c-99">{{ item?.tags[0]?.name }}</view>
								<view class="ft c-33 fw-800 mt-12">{{ item.nickname }}</view>
							</view>
						</view>
						<view class="flex-bwt">
							<view class="ft c-99 ml-20 flex">
								<text style="color: #333333">{{ item.service_num }}</text>
								<view class="flex-center">
									<text
										style="display: inline-block;height: 25rpx;width: 2rpx;background: #999999;margin: 0 10rpx;"></text>
									{{ " 服务过" }}
								</view>
							</view>
							<view class="mr-20 detail flex-center ft c-33" @click="goTeachaer(item.id)">{{ "详情" }}
							</view>
						</view>
					</view>
				</view>
			</view> -->
			<view class="card4 mt-24 pd-20" v-if="detailInfo.advise">
				<view class="ft1">建议</view>
				<view class="mt-20 ft ml-20">{{ !detailInfo.isAdvise ? detailInfo.advise?.substring(0, 20) :
					detailInfo.advise }}
					<text class="ft c-bbq" v-if="detailInfo.advise.length > 20"
						@click="detailInfo.isAdvise = detailInfo.isAdvise == 1 ? 0 : 1">{{
							detailInfo.isAdvise == 1 ? '收起' : '...展开' }}</text>
				</view>
			</view>
		</view>
		<view class="asd pd-20 mt-24 flex-bwt" v-if="detailInfo.like_list && detailInfo.like_list.length > 0">
			<view class="avtors flex">
				<view style="position: relative" v-for="(item, index) in detailInfo.like_list" :key="index">
					<image class="wh-72 mr-12" style="border-radius: 50%; z-index: 1" :src="item.avatar"></image>
					<image class="wh-28 mr-12" style="
              border-radius: 50%;
              position: absolute;
              right: 0;
              bottom: 0;
              z-index: 3;
            " src="https://cdn.oss.bon-top.cn/static_bc/images/thumbs.png"></image>
				</view>
			</view>

			<text class="ft c-99">{{
				detailInfo.like_num + "人点赞了"
			}}</text>
		</view>
		<view class="caseBox mb-250 mt-30 pd-20" v-if="detailInfo.replys && detailInfo.replys.length > 0">
			<view class="ft c-99">{{ detailInfo.replys.length + "条回复" }}</view>
			<view class="caseCard" v-for="(item) in detailInfo.replys" :key="item.id">
				<view class="mt-24 flex-bwt1">
					<view class="identity flex">
						<view style="position: relative">
							<image class="wh-72 mr-12" style="border-radius: 50%; z-index: 1"
								:src="item.user_info?.avatar">
							</image>
							<image v-if="item.user_info.sale_info && item.user_info.sale_info.is_official === 1"
								class="wh-28 mr-12" style="
                  border-radius: 50%;
                  position: absolute;
                  right: 0;
                  bottom: 0;
                  z-index: 3;
                " src="https://cdn.oss.bon-top.cn/static_bc/images/certified.png"></image>
						</view>
						<view class="desc ml-20">
							<view class="ft1 flex">
								{{ item.user_info.nickname }}
								<view class="nameplate ml-20 ft ft-20 c-dbf" v-if="item.user_info?.level_info?.id > 1"
									style="flex-shrink: 0;">
									{{ item.user_info?.level_info?.name }}
								</view>
							</view>
							<view class="ft mt-12 ft-20 c-99">{{
								item.ip_location + " | " + item.created_at
							}}</view>
						</view>
					</view>

					<view class="positionBox">
						<image @click="showRoport(item)" style="
								z-index: 1;
								width: 74rpx;
								height: 42rpx;
								margin-bottom: 30rpx;" src="https://cdn.oss.bon-top.cn/static_bc/images/more_p.png"></image>
						<view v-if="item.isMore" class="box pd-20">
							<view v-if="item.is_my === 0" class="ft c-33 flex-center"
								@click="goReport(item.id, '', 'reply_id')">
								举报
							</view>
							<view v-else class="ft c-33 flex-center" @click="isDelete(item.id, 'reply')">删除</view>
						</view>
					</view>

				</view>
				<view class="ft mt-12 ml-102" @click="openInput(item.user_info.nickname, item.id)">{{
					item.name
				}}</view>
				<view class="combination flex-eve ft mt-12 ml-102">
					<view class="flex-center" @click="openInput(item.user_info.nickname, item.id)">
						<image class="wh-24 mr-12" src="https://cdn.oss.bon-top.cn/static_bc/images/say.png"></image>
						<text class="ft">{{ item.children.length }}</text>
					</view>
					<text>|</text>
					<view class="flex-center" @click="handleZan(item.id, item.is_like, item)">
						<image v-if="item.is_like === 1" class="wh-24 mr-12"
							src="https://cdn.oss.bon-top.cn/static_bc/images/zan.png"></image>
						<image v-if="item.is_like === 0" class="wh-24 mr-12"
							src="https://cdn.oss.bon-top.cn/static_bc/images/noGood.png"></image>
						<text class="ft">{{ item.like_num }}</text>
					</view>
				</view>
				<view class="nextCase pd-20 mt-12 ml-102" v-if="item.children && item.children.length > 0">
					<view class="mt-20" v-for="child in item.children.slice(0, 2)" :key="child.id">
						<view class="flex-bwt1">
							<view class="identity flex">
								<view style="position: relative">
									<image class="wh-72 mr-12" style="border-radius: 50%; z-index: 1"
										:src="child.user_info?.avatar"></image>
									<!-- <image class="wh-28 mr-12" style="border-radius: 50%; position: absolute; right: 0; bottom: 0; z-index: 3;" src="https://cdn.oss.bon-top.cn/static_bc/images/certified.png"></image> -->
								</view>
								<view class="desc ml-20">
									<view v-if="child.parent_id && child.p_info" class="ft1 ft-24 c-33 flex"
										style="flex-wrap: wrap;gap: 4rpx 0; ">
										<!-- {{ child.user_info.nickname + " 回复：" + child.p_info.p_name }} -->
										<text>{{ child.user_info.nickname }}</text>
										<view class="nameplate ml-20 ft ft-20 c-dbf"
											v-if="child.user_info?.level_info?.id > 1" style="flex-shrink: 0;">
											{{ child.user_info?.level_info?.name }}
										</view>
										<text style="margin: 0 10rpx;"> 回复：</text>
										<text>{{ child.p_info.p_name }}</text>
										<view class="nameplate ml-20 ft ft-20 c-dbf"
											v-if="child.p_info?.level_info?.id > 1" style="flex-shrink: 0;">
											{{ child.p_info?.level_info?.name }}
										</view>

									</view>
									<view v-else class="ft1 ft-24 c-33">{{ child.user_info.nickname }}</view>
									<view class="ft mt-12 ft-20 c-99">{{
										child.ip_location + " | " + child.created_at
									}}</view>
								</view>
							</view>
							<view class="positionBox">
								<image @click="showRoport(child)" style="
									z-index: 1;
									width: 74rpx;
									height: 42rpx;
									margin-bottom: 30rpx;
									" src="https://cdn.oss.bon-top.cn/static_bc/images/more_p.png"></image>
								<view v-if="child.isMore" class="box pd-20">
									<view v-if="child.is_my === 0" class="ft c-33 flex-center"
										@click="goReport(child.id, '', 'reply_id')">举报
									</view>
									<view v-else class="ft c-33  flex-center" @click="isDelete(child.id, 'reply')">删除
									</view>
								</view>
							</view>

						</view>
						<view class="ft mt-12 ml-102">{{
							child.name
						}}</view>
						<view class="combination flex-eve ft ml-102">
							<view class="flex-center" @click="openInput(child.user_info.nickname, child.id)">
								<image class="wh-24 mr-12" src="https://cdn.oss.bon-top.cn/static_bc/images/say.png">
								</image>

								<text class="ft">{{ child.reply_num }}</text>
							</view>
							<text>|</text>
							<view class="flex-center" @click="handleZan(child.id, child.is_like, child)">
								<image v-if="child.is_like === 1" class="wh-24 mr-12"
									src="https://cdn.oss.bon-top.cn/static_bc/images/zan.png"></image>
								<image v-if="child.is_like === 0" class="wh-24 mr-12"
									src="https://cdn.oss.bon-top.cn/static_bc/images/noGood.png"></image>
								<text class="ft">{{ child.like_num }}</text>
							</view>
						</view>
						<view class="line mt-12 ml-102"></view>
					</view>
					<view class="casess flex-center mt-20" @click="goReply(item.id)">
						<text class="ft c-bbq">{{ "更多回复" }}</text>
						<image class="wh-24 ml-12" src="https://cdn.oss.bon-top.cn/static_bc/images/icon_left.png">
						</image>
					</view>
				</view>
				<view class="line mt-30" style="border-bottom: 2rpx solid #f1f1f1; width: 650rpx"></view>
			</view>
		</view>
	</view>
	<up-popup :show="showReport" mode="bottom" :round="20" closeable="true" @close="showReport = false">
		<view class="reportBox pd-20">
			<view class="ft1 flex-center"> 举报</view>
			<view class="list mt-40 pd-20">
				<view class="ft c-33 fw-800">{{ "选择举报类型" }}</view>
				<view class="flex mt-20">
					<view :class="{ active: selectedIndexes.includes(index) }" @click="toggleSelection(item, index)"
						class="item pd-10 mr-20 ft c-66 flex-center" v-for="(item, index) in reportList" :key="index">
						{{ item }} </view>
				</view>
			</view>
			<view class="list mt-40 pd-20">
				<view class="ft c-33 fw-800">{{ "输入举报内容" }}</view>
				<view class="flex mt-20">
					<up-textarea v-model="reportValue" placeholder="请输入内容" count autoHeight></up-textarea>
				</view>
			</view>
		</view>

		<view class="btn_box">
			<view class="btn auto mt-20 ft c-dbf flex-center" @click="subReport">
				提交
			</view>
		</view>


	</up-popup>
	<up-modal width="518rpx" @confirm="confirm" @cancel="cancel" contentTextAlign="center" :show="show" :title="title"
		:showCancelButton="true" :content="content"></up-modal>

	<view style="height: 166rpx;"></view>
	<view class="bottomCard">
		<view class="comments flex" style="padding-left: 30rpx">
			<view class="input flex-center  mt-12" style="padding-left: 8rpx">
				<!-- <up-input ref="inputRef" :placeholder="replysName" border="none" v-model="value1" @confirm="onReplay"
					@change="change" @touchstart="openInput('', 0)"></up-input> -->
				<view class="inputView" @tap="showInputFun" v-if="!showInput">
					<text class="ft-24 c-99">{{ '请文明用语' }}</text>
				</view>
			</view>
			<view class="share flex-c-center ml-40">
				<image class="wh-32" src="https://cdn.oss.bon-top.cn/static_bc/images/share.png"></image>
				<view class="ft">分享</view>
				<button open-type="share" class="hidden-share-btn"
					@click.stop="onCustomShare(detailInfo.id, detailInfo)"></button>

			</view>
			<view class="zan flex-c-center ml-40" @click="handleZan1(detailInfo.id, detailInfo.is_like, detailInfo)">
				<image v-if="detailInfo.is_like === 0" class="wh-32"
					src="https://cdn.oss.bon-top.cn/static_bc/images/noGood.png"></image>
				<image v-if="detailInfo.is_like === 1" class="wh-32"
					src="https://cdn.oss.bon-top.cn/static_bc/images/zan.png"></image>
				<view class="ft">点赞</view>
			</view>
		</view>
	</view>
	<!-- 回答 -->
	<comAnswerPop :show="showInput" @close="close" @onReplay="onReplay" :replysName="replysName"></comAnswerPop>
</template>

<script setup>
import {
	ref,
	reactive
} from "vue";
import {
	utils
} from "@/utils/utils.js";
import {
	api
} from "@/utils/api.js";
import {
	onLoad,
	onShow,
	onUnload,
	onShareAppMessage,
	onShareTimeline
} from "@dcloudio/uni-app";
import comRate from '@/components/comRate.vue'
import comAnswerPop from "@/components/comAnswerPop.vue";
import comHead from '@/components/comHead.vue';
let datasObj = reactive({
	title: '评价详情',
	img: '',
	color: '#FFFFFF',
	direction: '',
	scrollTop: 0,
	noBack: false,
})
const replysName = ref('请输入回复内容')
const showInput = ref(false)
const parentId = ref(0)
const isFocus = ref(true)
const _options = ref({})
const shareConfig = ref({
	title: '',
	path: '',
	imageUrl: '',
	queryParams: {} // 当前页面参数
})
const showInputFun = () => {
	showInput.value = true
	replysName.value = '请文明用语~'

};
// 展示图片
const openImg = (index, imgList = []) => {
	uni.previewImage({
		current: index,
		urls: imgList
	});
}
// 获取页面栈实例
const currentPages = getCurrentPages()
const currentRoute = currentPages[currentPages.length - 1]
const secondsStart = ref(0)
const secondsEnd = ref(0)
// 初始化分享参数
const initShareParams = (id) => {
	// 获取当前页面参数
	console.log('currentRoute', currentRoute.options)
	const query = currentRoute.options || {}
	if (!query.share_user_id) {
		const userInfo = uni.getStorageSync("userInfo")
		query.share_user_id = userInfo ? userInfo.id : ''
	}
	if (!query.id) query.id = id
	query.timestemp = parseInt((new Date().getTime()) / 1000)


	const queryString = Object.keys(query)
		.map(key => `${key}=${query[key]}`)
		.join('&')

	// 更新分享配置
	shareConfig.value = {
		...shareConfig.value,
		// path: `subpackage/immigration/immigration?${queryString}`,
		path: `${currentRoute.route}?${queryString}`,
		queryParams: query,

	}
	console.log('shareConfig.value', shareConfig.value)
}
// 自定义分享方法
const onCustomShare = (id, list) => {
	console.log('detailInfo', detailInfo.value, id, list)
	shareConfig.value.title = list.name
	shareConfig.value.imageUrl = list.cover
	initShareParams(id)
}
// 好友分享配置
onShareAppMessage(() => ({
	title: shareConfig.value.title,
	path: shareConfig.value.path,
	imageUrl: shareConfig.value.imageUrl,
	success(res) {
		uni.$emit('shareSuccess', {
			type: 'friend',
			data: shareConfig.value.queryParams
		})
	}
}))

// 朋友圈分享配置（需基础库2.11.3+）
onShareTimeline(() => ({
	title: shareConfig.value.title,
	query: shareConfig.value.path.split('?') || '',
	imageUrl: shareConfig.value.imageUrl
}))

const goProjectDetail = (id) => {
	uni.navigateTo({ url: '/subpackage/immigration/immigration?id=' + id })
}
//回复接口
const onReplay = (val) => {
	utils
		.request(
			api.commentReply, {
			content: val,
			parent_id: parentId.value,
			evaluate_id: detailInfo.value.id,
		},
			"post"
		)
		.then((res) => {

			showInput.value = !showInput.value
			getEvaluateDetailData(replysId.value)
		})

}
// const openInput = () => {
// 	showInput.value = !showInput.value;

// }
const inputRef = ref(null);
const openInput = (name, id) => {
	if (!utils.isLogin()) return utils.showLogModel()

	replysName.value = name ? `回复 ${name} 的评论` : replysName.value;
	parentId.value = id;
	showInput.value = !showInput.value
}
const close = () => {
	// 关闭逻辑，设置 show 为 false  
	showInput.value = false;
	// value2.value = ''
	replysName.value = '请输入回复内容~'
	parentId.value = 0

	// apiType.value = 'answerQuestion'
}


const showReport = ref(false)
const replysId = ref(null)
const value1 = ref("");
const isMore = ref(false);
const detailInfo = ref({});
const product_info = ref({});
const user_info = ref({});

const show = ref(false);
const title = ref("清除评论");
const content = ref("确定要删除该条评论吗？");

const reportValue = ref('')


const selectedIndexes = ref([]);
const slectIdxVal = ref([])

function toggleSelection(item, index) {
	const indexOfIndex = selectedIndexes.value.indexOf(index);
	if (indexOfIndex > -1) {
		// 如果已经选中，撤销选中
		selectedIndexes.value.splice(indexOfIndex, 1);
		slectIdxVal.value.splice(indexOfIndex, 1);
	} else {
		// 如果没有选中，添加到选中列表
		selectedIndexes.value.push(index);
		slectIdxVal.value.push(item)

	}
}

//删除评论
const confirm = () => {
	show.value = false;
	console.log()
	if (deleteType.value == 'eval') {
		// uni.navigateBack(-1)

		utils
			.request(
				api.deleteEvaluate, {
				id: deleteId.value
			},
				"post"
			)
			.then((res) => {
				// reloadData()
				uni.navigateBack(-1)
			});
	} else {
		utils
			.request(
				api.deleteReply, {
				id: deleteId.value
			},
				"post"
			)
			.then((res) => {
				getEvaluateDetailData(replysId.value)
				closeReply()

			})
	}

};

const cancel = () => {
	show.value = false;
};

const showRoport = (item) => {
	if (item.isMore) {
		item.isMore = false
	} else {
		item.isMore = true
	}



}

const addIsMoreProperty = (arr) => {
	for (let i = 0; i < arr.length; i++) {
		const obj = arr[i];
		// 给当前对象添加 isMore 属性
		obj.isMore = false;
		if (obj.children && Array.isArray(obj.children)) {
			// 如果有 children 数组，递归调用函数处理 children 数组
			addIsMoreProperty(obj.children);
		}
	}
	return arr;
}
const deleteId = ref(null)
const deleteType = ref('reply')
const isDelete = (id, type = 'reply') => {
	deleteType.value = type
	show.value = true;
	deleteId.value = id
}
const flag = ref(true)
const zanCount = ref(0)
const zanTime = ref('')
const maxTime = ref(30)
const handleZan = (id, islike, item) => {
	let time = (parseInt(Date.now()) - parseInt(zanTime.value)) / 1000
	if (time < maxTime.value && zanCount.value > 10) {
		uni.showToast({ title: '操作过于频繁请稍后再试~', icon: 'none' })
		return flag.value = false
	} else if (time > maxTime.value) {
		zanTime.value = ''
		flag.value = true
		zanCount.value = 0
	}
	if (!flag.value) return
	flag.value = !flag.value
	zanCount.value++
	if (!zanTime.value) zanTime.value = Date.now()
	if (islike === 0) {
		utils
			.request(
				api.like, {
				reply_id: id,
			},
				"post"
			)
			.then((res) => {
				flag.value = !flag.value
				item.like_num++

				item.is_like = 1
			})
	} else {
		utils
			.request(
				api.cancelLike, {
				reply_id: id,
			},
				"post"
			)
			.then((res) => {
				item.is_like = 0
				item.like_num--

				flag.value = !flag.value

			})
	}

}
const flag1 = ref(true)
const zanCount1 = ref(0)
const zanTime1 = ref('')
const maxTime1 = ref(30)
const handleZan1 = (id, islike, item) => {
	let time = (parseInt(Date.now()) - parseInt(zanTime1.value)) / 1000
	if (time < maxTime1.value && zanCount1.value > 10) {
		uni.showToast({ title: '操作过于频繁请稍后再试~', icon: 'none' })
		return flag1.value = false
	} else if (time > maxTime1.value) {
		zanTime1.value = ''
		flag1.value = true
		zanCount1.value = 0
	}
	if (!flag1.value) return
	flag1.value = !flag1.value
	zanCount1.value++
	if (!zanTime.value) zanTime1.value = Date.now()
	if (islike === 0) {
		utils
			.request(
				api.like, {
				evaluate_id: id,
			},
				"post"
			)
			.then((res) => {
				// getEvaluateDetailData(replysId.value)
				item.is_like = 1
				item.like_num++
				flag1.value = !flag1.value
			})
	} else {
		utils
			.request(
				api.cancelLike, {
				evaluate_id: id,
			},
				"post"
			)
			.then((res) => {
				item.is_like = 0
				item.like_num--
				flag1.value = !flag1.value
				// getEvaluateDetailData(replysId.value)
			})
	}

}


const getEvaluateDetailData = (id) => {
	utils
		.request(
			api.getEvaluateDetail, {
			id: id,
		},
			"get"
		)
		.then((res) => {
			detailInfo.value = res.data.info;
			// parentId.value = detailInfo.value.id;
			product_info.value = res.data.info.product_info;
			user_info.value = res.data.info.user_info;
			if (detailInfo.value.replys && detailInfo.value.replys.length > 0) {
				addIsMoreProperty(detailInfo.value.replys)
			}
			console.log(detailInfo.value, "detailInfo.value>>>>>>>>>>>");
		});
};

const reportId = ref(null);
const reportType = ref('');
const isPingJia = ref(false)
const goReport = (id, num, type) => {
	showReport.value = true;
	reportId.value = id;
	reportType.value = type;
	getReportList()
	closeReply()
	if (num && num === 1) {
		isPingJia.value = true;
	}
};


const reportList = ref([])
const getReportList = () => {
	utils
		.request(
			api.getReportOptions, {

		},
			"post"
		)
		.then((res) => {
			reportList.value = res.data.options.type_list;
		})
}
const closeReply = () => {
	detailInfo.value.replys.forEach(f => {
		f.isMore = false
		console.log('f.isMore', f.isMore, f.children)
		f.children.forEach(c => {
			c.isMore = false

		})
	});
	isMore.value = false

	reportValue.value = ''
}
const subReport = () => {
	if (isPingJia) {
		utils
			.request(
				api.report, {
				types: slectIdxVal.value,
				[reportType.value]: reportId.value,
				content: reportValue.value

			},
				"post",
				"application/x-www-form-urlencoded;charset=utf-8"
			)
			.then((res) => {
				if (res.code == 200)
					utils.toast('感谢您的举报，举报结果稍后反馈给您！');
				showReport.value = false;
				selectedIndexes.value = [];
				slectIdxVal.value = [];
				isPingJia.value = false;
				closeReply()

			})
	} else {
		utils
			.request(
				api.report, {
				types: slectIdxVal.value,
				reply_id: reportId.value,
				content: reportValue.value

			},
				"post",
				"application/x-www-form-urlencoded;charset=utf-8"
			)
			.then((res) => {
				if (res.code == 200)
					utils.toast('感谢您的举报，举报结果稍后反馈给您！');
				showReport.value = false;
				selectedIndexes.value = [];
				slectIdxVal.value = [];
			})
	}

}




const goReply = (id) => {
	uni.navigateTo({
		url: `/subpackage/search/reply?id=${id}`,
	});
};

const goTeachaer = (id) => {
	uni.navigateTo({
		url: `/subpackage/teacher/teacherDetail?id=${id}`,
	});
};

const change = () => { };

onShow(() => {
	getEvaluateDetailData(replysId.value);
})
// const startTime = ref(0)
// const product_id = ref(null)
// const group_id = ref('')
// const share_user_id = ref('')
// const timestemp = ref('')
// const isSettings = ref(false)
onLoad((options) => {
	// startTime.value = Math.floor(Date.now() / 1000)
	// uni.showModal({ title: options.id })
	if (options.id) {
		replysId.value = options.id;
		// product_id.value = options.id;
		// group_id.value = options.group_id ? options.group_id : '';
		// share_user_id.value = options.share_user_id ? options.share_user_id : '';
		// timestemp.value = options.timestemp ? options.timestemp : '';
		getEvaluateDetailData(options.id);
	}
});
// onUnload(() => {
// 	let duration = Math.floor(Date.now() / 1000) - startTime.value
// 	if (share_user_id.value && timestemp.value && uni.getStorageSync("userInfo")) {
// 		utils
// 			.request(
// 				api.shareVisit, {
// 				share_user_id: share_user_id.value,
// 				timestemp: timestemp.value,
// 				seconds: Math.round(duration / 1000),
// 				product_id: product_id.value,
// 			},
// 				"post"
// 			)
// 			.then((res) => {

// 			});
// 	}
// })
</script>

<style lang="scss" scoped>
.popup {
	height: 860rpx;

	//border: 2rpx solid red;
	.huifu {
		width: 128rpx;
		height: 58rpx;
		background: #333333;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
	}

	.close_black_img {
		width: 36rpx;
		height: 36rpx;
	}
}

.ft {
	word-break: break-all;
}

.reportBox {
	// width: 60%;
	height: 800rpx;
	border-radius: 40rpx;
	background: #f8f8f8;

	.list {
		height: 230rpx;
		background: #fff;
		border-radius: 20rpx;

		.item {
			background: #fff5f3;
			border-radius: 20rpx;
		}

		.active {
			background: #333333;
			color: #dbf046;
		}
	}
}

.btn_box {
	padding-bottom: calc(10rpx + env(safe-area-inset-bottom));

	.btn {
		width: 690rpx;
		height: 78rpx;
		background: #333333;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
	}
}


.detail {
	background: #fff;
	padding: 0 30rpx;
	box-sizing: border-box;

	//border: 2rpx solid red;
	.cardList {
		border-top: 2rpx solid #F1F1F1;
		padding-top: 30rpx;

		.card {
			margin: auto;
			// margin-top: 20rpx;
			margin-bottom: 20rpx;
			width: 690rpx;
			height: 408rpx;
			background: #ffffff;
			border-radius: 40rpx;
			border: 2rpx solid #f1f1f1;

			.left {
				width: 222rpx;
				height: 274rpx;
				border-radius: 40rpx 40rpx 40rpx 40rpx;
			}

			.right {
				flex: 1;
				height: 274rpx;

				.top {
					.tip {
						// width: 88rpx;
						display: inline-block;
						height: 36rpx;
						line-height: 36rpx;
						box-sizing: border-box;
						padding: 0 4rpx;
						background: linear-gradient(88deg, #dbf046 0%, #ffee7e 100%);
						border-radius: 8rpx 8rpx 8rpx 8rpx;
					}
				}

				.domn {
					.price {
						//width: 148rpx;
						height: 92rpx;
						background: linear-gradient(90deg,
								#fff5f3 0%,
								rgba(255, 245, 243, 0) 100%);
						border-radius: 20rpx 20rpx 20rpx 20rpx;
					}

					.price2 {
						//width: 148rpx;
						height: 92rpx;
						background: #fff;
						border-radius: 20rpx 20rpx 20rpx 20rpx;
					}
				}
			}

			.foot {
				width: 100%;
				height: 74rpx;
				background: linear-gradient(92deg,
						#f8f8f8 0%,
						rgba(248, 248, 248, 0) 100%);
				border-radius: 40rpx;
				padding: 0 20rpx;
				box-sizing: border-box;
			}
		}
	}

	.positionBox {
		//border: #d51010 solid 2rpx;
		position: relative;

		.box {
			position: absolute;
			bottom: -42rpx;
			left: -40rpx;
			z-index: 22;
			width: 128rpx;
			// height: 128rpx;
			background: #fff;
			box-shadow: 0rpx 0rpx 24rpx 2rpx rgba(0, 0, 0, 0.06);
			border-radius: 20rpx 20rpx 20rpx 20rpx;
		}
	}

	.pCase {
		// width: 690rpx;
		// height: 1740rpx;
		background: #f8f8f8;
		border-radius: 40rpx 40rpx 40rpx 40rpx;
		margin-top: 20rpx;

		.avtor {
			border-radius: 50%;

		}

		.right {
			//width: 500rpx;
		}

		.nameplate {
			// width: 88rpx;
			height: 36rpx;
			background: #333333;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			line-height: 36rpx;
			padding: 0 10rpx;
		}

		.tcard {
			padding-left: 20rpx;
			padding-right: 20rpx;
			height: 58rpx;
			background: #f1f1f1;
			border-radius: 34rpx 34rpx 34rpx 34rpx;
		}

		.card1 {
			width: 650rpx;
			//height: 362rpx;
			background: #ffffff;
			border-radius: 40rpx 40rpx 40rpx 40rpx;

			.scroll-view_H {
				height: 174rpx;
				box-sizing: border-box;

			}

			.imgGroup {}
		}

		.group {
			width: 138rpx;
			height: 174rpx;
			border-radius: 40rpx 40rpx 40rpx 40rpx;
		}

		.card2 {
			width: 650rpx;
			// height: 556rpx;
			background: #ffffff;
			border-radius: 40rpx 40rpx 40rpx 40rpx;
			// .card_4 {
			// 	width: 690rpx;
			// 	// height: 488rpx;
			// 	background: #f8f8f8;
			// 	border-radius: 40rpx 40rpx 40rpx 40rpx;

			.box2 {
				width: 650rpx;
				// height: 304rpx;
				background: #ffffff;
				border-radius: 20rpx 20rpx 20rpx 20rpx;
			}

			// }
		}

		.card3 {
			width: 650rpx;
			height: 298rpx;
			background: #ffffff;
			border-radius: 40rpx 40rpx 40rpx 40rpx;

			.consultant {
				width: 294rpx;
				height: 198rpx;
				background: #f8f8f8;
				border-radius: 40rpx 40rpx 40rpx 40rpx;

				.avtor {
					width: 88rpx;
					height: 88rpx;
					background: #f8f8f8;
					border: 2rpx solid #dbf046;
					border-radius: 50%;
				}

				.detail {
					width: 88rpx;
					height: 54rpx;
					background: #dbf046;
					border-radius: 20rpx 20rpx 20rpx 20rpx;
				}
			}
		}

		.card4 {
			width: 650rpx;
			padding: 20rpx;
			background: #ffffff;
			border-radius: 40rpx 40rpx 40rpx 40rpx;
		}
	}

	.asd {
		// width: 690rpx;
		height: 108rpx;
		background: #f8f8f8;
		border-radius: 40rpx 40rpx 40rpx 40rpx;
	}

	.caseBox {
		// width: 690rpx;
		// height: 1384rpx;
		background: #f8f8f8;
		border-radius: 40rpx 40rpx 40rpx 40rpx;

		.nameplate {
			// width: 88rpx;
			height: 36rpx;
			background: #333333;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			line-height: 36rpx;
			padding: 0 10rpx;
		}

		.combination {
			width: 172rpx;
			height: 54rpx;
			background: #ffffff;
			border-radius: 28rpx 28rpx 28rpx 28rpx;
		}

		.line {
			width: 446rpx;
			height: 0rpx;
			border-bottom: 2rpx solid #f1f1f1;
		}

		.nextCase {
			width: 562rpx;
			// height: 530rpx;
			background: #ffffff;
			border-radius: 40rpx 40rpx 40rpx 40rpx;

			.casess {
				width: 160rpx;
				height: 54rpx;
				background: #f8f8f8;
				border-radius: 20rpx 20rpx 20rpx 20rpx;
			}
		}
	}
}

.bottomCard {
	position: fixed;
	z-index: 99;
	bottom: 0rpx;
	//   border: #dbf046 2rpx solid;
	width: 750rpx;
	height: 166rpx;
	background: #f8f8f8;
	box-shadow: 0rpx -2rpx 2rpx 2rpx rgba(0, 0, 0, 0.05);

	.inputView {
		width: 100%;
		text-align: left;
	}

	.comments {
		width: 750rpx;
		height: 98rpx;
		background: #f8f8f8;
		box-shadow: 0rpx -2rpx 2rpx 2rpx rgba(0, 0, 0, 0.05);

		.input {
			width: 500rpx;
			height: 78rpx;
			background: #ffffff;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			border: 2rpx solid #333333;
		}
	}

	.share {
		position: relative;

	}


	.hidden-share-btn {
		opacity: 0;
		position: absolute;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
		background-color: red;

	}
}

:deep(.u-steps-item__line) {
	background: #F1F1F1 !important;
}
</style>